import ThemeBtn from '@/components/antd-comp/theme-btn'
import { Button, Modal } from 'antd'
import { useState } from 'react'
import { useTranslation } from 'react-i18next'
import './index.less'
/*

modal 业务弹窗
     title。      名称
     content      内容
     okText       确认文字
     cancelText   取消文字
     width        \u
     onCancel     取消方法
     onOk         确认方法
     selfFooter   覆盖默认footer

import ModalComponent from '@/components/antd-comp/modal/ModalComponent'

{xx ? (
   <ModalComponent
    title="xxx"
    width={900}
    content={
      <div className="flexCol">
        <p>1</p>
        <p>2</p>
      </div>
    }
    okText="okText"
    cancelText="cancelText"
    onCancel={() => {
      console.log('onCancel')
    }}
    onOk={() => {
      console.log('onOk')
    }}
  />
) : null}
*/
const ModalComponent = ({
  title,
  content,
  width = 600,
  onCancel,
  onOk,
  okText,
  cancelText,
  selfFooter,
  ...props
}: any) => {
  const [isModalVisible, setIsModalVisible] = useState(true)
  const { t } = useTranslation()
  return (
    <>
      <Modal
        title={title}
        open={isModalVisible}
        onCancel={onCancel}
        width={width}
        className="modal_antcomp_case max-h-[40%]"
        style={{ top: '10%' }}
        maskClosable={false}
        footer={
          selfFooter || [
            <Button key="cancel" className="closeBtnStyles closeBtnWid" shape="round" onClick={onCancel}>
              {cancelText || t('cancel')}
            </Button>,
            <ThemeBtn key="create" className="closeBtnWid" onClick={onOk}>
              {okText || t('create')}
            </ThemeBtn>
          ]
        }
        {...props}
      >
        {content}
      </Modal>
    </>
  )
}

export default ModalComponent
